<template>
  <div class="administratorManagement">
    <div class="top">
      <div class="left" @click="is_show_add_administrator=true"><i></i>新增管理员</div>
    </div>
    <div class="content">
      <vuescroll :ops="ops">
        <el-table
          :data="admin_list"
          border
          style="width: 100%">
          <el-table-column
            prop="name"
            label="姓名"
            >
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
           >
          </el-table-column>
          <el-table-column
            prop="departmentName"

            label="所属部门">
          </el-table-column>
          <el-table-column prop="level" label="用户等级" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.level==1">高级用户</span>
              <span v-if="scope.row.level==2">普通用户</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="address" width="500"
            label="管理员权限">
            <template slot-scope="scope" >
              <span :class="['permission-tag',scope.row.userAdmin==false?'':'active']">用户</span>
              <span :class="['permission-tag',scope.row.adAdmin==false?'':'active']">管理员</span>
              <span :class="['permission-tag',scope.row.transferAdmin==false?'':'active']">一键移交</span>
              <span :class="['permission-tag',scope.row.baseAdmin==false?'':'active']">基础数据</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作" width="200">
            <template slot-scope="scope">
              <span class="permission_edit" @click="toAdminQuanxian(scope.row)"></span>
              <span class="permission_del" @click="handleDelete(scope.row)">
              </span>
            </template>
          </el-table-column>
        </el-table>
      </vuescroll>
    </div>
    <div class="page" style="display: none;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next"
        :total="1000">
      </el-pagination>
    </div>
    <!--    新增管理员弹框-->
    <div class="add_administrator" v-if="is_show_add_administrator">
      <div class="add_administrator_inner">
        <div class="title">新增管理员
          <i @click="is_show_add_administrator=false"></i></div>
        <div class="row">
          <label>姓名</label>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in member_list"
              :key="item.userId"
              :label="item.name"
              :value="item.userId">
            </el-option>
          </el-select>
        </div>
        <div class="btn" @click="save_add_admin">保存</div>
      </div>
    </div>
    <!--    编辑管理员权限-->
    <div class="edit_administrator " v-if="is_show_edit_administrator">
      <div class="edit_administrator_inner">
        <div class="title">
          <div class="title">修改用户权限
            <i @click="is_show_edit_administrator=false"></i></div>
        </div>
        <div class="content">
          <div class="row">
            <label for="">用户</label>{{edit_administrator_data.name}}
          </div>
          <div class="row">
            <label for="">用户管理</label>
            <el-switch
              v-model="edit_administrator_data.userAdmin"
              active-color="#13ce66"
              inactive-color="#dddddd">
            </el-switch>
          </div>
          <div class="row">
            <label for="">管理员权限</label>
            <el-switch
              v-model="edit_administrator_data.adAdmin"
              active-color="#13ce66"
              inactive-color="#dddddd">
            </el-switch>
          </div>
          <div class="row">
            <label for="">一键移交</label>
            <el-switch
              v-model="edit_administrator_data.transferAdmin"
              active-color="#13ce66"
              inactive-color="#dddddd">
            </el-switch>
          </div>
          <div class="row">
            <label for="">基础管理</label>
            <el-switch
              v-model="edit_administrator_data.baseAdmin"
              active-color="#13ce66"
              inactive-color="#dddddd">
            </el-switch>
          </div>
        </div>
        <div class="btn" @click="save_edit_administrator">保存</div>
      </div>
    </div>
    <loading v-if="is_show_loading"></loading>
  </div>
</template>

<script>
  import vuescroll from 'vuescroll'
  import loading from '@/components/loading'
  export default {
    name: "AdministratorManagement",
    components: {
      vuescroll,loading
    },
    data() {
      return {
        is_show_loading:true,
        edit_administrator_data:{},//编辑的信息
        is_show_edit_administrator: false,//是否显示编辑
        is_show_add_administrator: false,//是否显示新增
        value: '',//选择的将要成为管理员的成员id
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '40px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        currentPage1: 5,
        member_list: [],
        admin_list: [],
      }
    },
    created() {
      this.getAdminList();
      this.getMemberList();
    },
    methods: {
      //保存编辑
      save_edit_administrator(){
        this.$http.post('/user/user/update',this.edit_administrator_data).then(res=>{
          if(res.statusCode==200){
            this.is_show_edit_administrator=false;
            if(this.edit_administrator_data.userId==this.$store.state.userInfo.userId){
              this.$message.success('您修改了自己的权限，请重新登录');
              localStorage.clear();
              this.$router.push({path: '/login'});
              this.active = 'smart';
            }else {
              this.$message.success('修改成功');
              this.getAdminList();
            }
          }else {
            this.$message.error(res.statusMsg);
          }
        })
      },
      //打开权限
      toAdminQuanxian(data) {
        this.edit_administrator_data=JSON.parse(JSON.stringify(data));
        console.log(data);
        this.is_show_edit_administrator=true;
      },
      //删除
      handleDelete(data) {
        let _this=this;
        this.$confirm('删除该管理员, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.$http.post('/user/user/update',{
            admin:false,
            userId:data.userId
          }).then(res=>{
            if(res.statusCode==200){
              _this.$message.success('删除成功');
              _this.getAdminList();
            }else {
              _this.$message.error(res.statusMsg);
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //保存添加
      save_add_admin() {
        let params={
          admin:true,
          userId:this.value,
        };
        this.$http.post('user/user/update', params).then(res => {
          if (res.statusCode == 200) {
            this.$message.success('修改成功');
            this.is_show_add_administrator=false;
            this.getAdminList();
          } else {
          this.$message.error(res.statusMsg);
          }
        })
      },
      //成员列表
      getMemberList() {
        this.$http.get('user/user/list', {
          params: {
            companyId: this.$store.state.userInfo.companyId,
            queryAll: true,
            admin:false
          }
        }).then(res => {
          if (res.statusCode == 200) {
            this.member_list = res.data;
          } else {
            this.$message.error(res.statusMsg);
          }
        });
      },
      //管理员列表
      getAdminList() {
        this.$http.get('user/user/list', {
          params: {
            companyId: this.$store.state.userInfo.companyId,
            admin: true,
            queryAll: true,
          }
        }).then(res => {
          if (res.statusCode == 200) {
            this.admin_list = res.data;
            setTimeout(()=> {
              this.is_show_loading=false;
            }, 1000);
          } else {
            this.$message.error(res.statusMsg);
          }
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .administratorManagement {
    width: 100%;
    height: 100%;
    padding: 0 24px 24px 24px;
    box-sizing: border-box;
    position: relative;
    .permission-tag {
      padding: 10px 17px;
      display: inline-block;
      margin-right: 16px;
      background-color: #F2F6F9;
      border-radius: 6px;
      color: #96A2AA;
      margin-top: 10px;
      margin-bottom: 16px;
    }

    .permission-tag.active {
      background-color: #0755DB;
      color: #ffffff;
    }

    > .top {
      height: 88px;
      padding: 0 24px;
      box-sizing: border-box;

      .left {
        float: left;
        padding-top: 37px;
        padding-left: calc(45px - 24px);
        font-size: 14px;
        color: #96A2AA;
        position: relative;
        cursor: pointer;

        i {
          position: absolute;
          width: 12px;
          height: 12px;
          left: 0;
          top: 37px;
          background-image: url("../../../assets/img/ht/ic_add2.png");
          background-size: cover;
          background-position: center;
        }
      }

      .right {
        margin-top: 24px;
        float: right;
        width: 320px;
        height: 40px;
        background-color: #F2F6F9;
        border-radius: 6px;
        position: relative;

        > input {
          height: 40px;
          line-height: 40px;
          border: none;
          width: 280px;
          background: none;
          text-indent: 16px;
          font-size: 14px;
        }

        > i {
          position: absolute;
          width: 18px;
          height: 18px;
          right: 12px;
          top: 12px;
          cursor: pointer;
          background-image: url("../../../assets/img/ht/member/ic_search.png");
        }
      }
    }

    .permission_del {
      display: inline-block;
      cursor: pointer;
      background-image: url("../../../assets/img/ht/member/ic_me_delete.png");
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }

    .permission_edit {
      display: inline-block;
      cursor: pointer;
      background-image: url("../../../assets/img/ht/member/ic_me_edit.png");
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      margin-right: 56px;
    }

    > .content {
      height: calc(100% - 88px - 32px);
      display: flex;

      .page {
        .el-pagination {
          text-align: right;
        }
      }
    }

    .add_administrator {
      left: 0;
      top: 0;
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 100;

      .add_administrator_inner {
        width: 527px;
        height: 196px;
        border-radius: 6px;
        background-color: #ffffff;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        padding: 32px;

        .title {
          font-size: 16px;
          color: #454a55;
          position: relative;
          height: 48px;
          font-weight: bold;
          padding-bottom: 32px;

          > i {
            background-size: 16px 17px;
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
            width: 16px;
            height: 17px;
            background-image: url("../../../assets/img/close_icon.png");
            top: 0px;
            right: 0px;
            cursor: pointer;
          }
        }

        .row label {
          text-align: right;
          display: inline-block;
          width: 100px;
          padding-right: 12px;
        }

        > .btn {
          width: 88px;
          height: 32px;
          line-height: 32px;
          background-color: #0755DB;
          border-radius: 6px;
          text-align: center;
          color: #ffffff;
          float: right;
          margin-top: 24px;
          margin-right: 40px;
          cursor: pointer;
        }
      }
    }

    .edit_administrator {
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      top: 0;
      left: 0;
      z-index: 100;

      .edit_administrator_inner {
        width: 527px;
        height: 384px;
        background-color: #ffffff;
        border-radius: 6px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        padding: 32px;

        .title {
          font-size: 16px;
          color: #454a55;
          position: relative;
          height: 48px;
          font-weight: bold;
          padding-bottom: 32px;

          > i {
            background-size: 16px 17px;
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
            width: 16px;
            height: 17px;
            background-image: url("../../../assets/img/close_icon.png");
            top: 0px;
            right: 0px;
            cursor: pointer;
          }
        }

        .content {
          .row {
            color: #454A55;
            font-size: 14px;
            padding-bottom: 30px;

            label {
              display: inline-block;
              width: 110px;
              padding-right: 40px;
              text-align: right;
              color: #454A55;
              font-size: 14px;
            }
          }
        }

        .btn {
          background-color: #0755DB;
          width: 88px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          color: #ffffff;
          float: right;
          margin-right: 32px;
          border-radius: 6px;
          cursor: pointer;
        }
      }
    }
  }
</style>
<style type="text/scss" lang="scss">
  .administratorManagement {
    .el-table td, .el-table th {
      text-align: center;
    }

    .has-gutter {
      tr {
        background-color: #F2F6F9;
      }

      th {
        background-color: #F2F6F9;
      }

    }

    .page {
      .el-pagination {
        text-align: right;
        padding-top: 10px;
      }
    }

    .el-table--border {
      border: none;
    }

    .el-table--border th, .el-table--border td {
      border-right: none;
    }

    .el-table td {
      border-color: #EEEEEE;
    }

    .el-table--border::after, .el-table--group::after, .el-table::before {
      background: none;
    }

    .row {
      .el-input__inner, .el-textarea__inner {
        width: 320px;
        background-color: #f2f6f9;
        border-color: #f2f6f9;
      }
    }

    .el-table--enable-row-hover .el-table__body tr:hover > td {
      background-color: #ffffff;
    }
  }

</style>
